<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- HTMLFormElement -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement -->
    <!-- HTMLFormElement接口可以创建或者修改<form>对象;它继承了HTMLElement接口的方法和属性。 -->

    <p>GlobalEventHandlers.onsubmit</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onsubmit -->
    <!-- GlobalEventHandlers 的 onsubmit 属性是一个处理 submit (en-US) 的 event handler。 -->
    <!-- submit 事件会在用户点击提交按钮（<input type="submit"/> 元素）提交表单时触发。 -->
    <!-- GlobalEventHandlers.onreset -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onreset -->
    <!-- The GlobalEventHandlers.onreset 属性包含 event handler ，当收到一个reset (en-US) 事件时触发 -->
    <div>
        <form id="form_11" action="">
            <input id="username" name="username" type="text" placeholder="username"> <br>
            <button type="reset">重置</button>
            <button type="submit">提交</button>
        </form>
    </div>
    <script>
        document.forms['form_11'].onsubmit = function (event) {
            var usernameNode = document.getElementById('username');
            var username = usernameNode.value;
            // 在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()，而在IE6~8中，使用returnValue属性来实现。
            // 方案1
            // if (username.length < 4) {
            //     alert('the length of username is less than 4');
            //     return false;
            // } else {
            //     return true;
            // }
            // 方案2
            if (username.length < 4) {
                alert('the length of username is less than 4');
                event.preventDefault();
            }
        };

        document.forms['form_11'].onreset = function (event) {
            console.log('reset event happened.');
            // 用事件阻止来验证重置事件
            event.preventDefault();
        };
    </script>


    <p>form.submit</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/submit -->
    <!-- HTMLFormElement.submit()用来提交表单。 -->
    <div>
        <form id="form_21" action="https://www.baidu.com/s" target="_blank">
            <input name="wd" type="text" placeholder="百度搜索关键词">
        </form>
        <button onclick="doSubmit();">提交</button>
    </div>
    <script>
        function doSubmit() {
            document.forms['form_21'].submit();
        }
    </script>
    <hr>

    <p>form.reset</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/reset -->
    <!-- reset 方法可以重置一个表单内的所有表单控件的值到初始状态. -->
    <div>
        <form id="form_22" action="https://www.baidu.com/s" target="_blank">
            <input name="wd" type="text" placeholder="百度搜索关键词">
        </form>
        <button onclick="doReset();">重置</button>
    </div>
    <script>
        function doReset() {
            document.forms['form_22'].reset();
        }
    </script>

</body>

</html>